<template>
	<view class="wrapper">
		<view class="num_box">
			<radio-group name="number" @change="radioChange">
				<label class="setFlex">
					<view class="cos_num" v-for="(val,index) in priceList" :key='val'>
						<view class="num">{{val}}元</view>
						<radio :value="val" class="m_right" :checked="index==0"/>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="cos_pay">
			选择支付方式
		</view>
		<view class="v_or_ali">
			<view class="total_box">
				<view class="total">总计</view>
				<view class="total_num"><text>￥</text>{{price}}</view>
			</view>
<!-- 			<button type="default" class="wpay wadh" @tap="rechargeGetSign(2)">微信支付</button>
			<button type="default" class="alipay wadh" @tap="rechargeGetSign(1)">支付宝支付</button> -->
			<button type="default" class="wpay wadh" @tap="userRecharge()">确定</button>
		</view>

	</view>
</template>

<script>
	import md5 from '../../common/md5.min.js'
	export default {
		data() {
			return {
				priceList:[0.01,1,10,50,100,500,1000,5000],
				price:0.01
			}
		},
		methods: {
			// 切换价格
			radioChange(e){
				this.price=e.detail.value
			},
			userRecharge(){
				this.$ajax(
					'skTransfer/userRecharge',
					{
						money: this.price
					},
					'POST'
				).then(res => {
					this.$sToast('提交成功,等待确认中。');
					this.$back(1, 1500);
				});
			},
			// 发起支付
			rechargeGetSign(payType){
				this.$ajax(
					this.apiList.rechargeGetSign,
					{
						payType:payType,
						price:this.price,
						secret: md5(md5(this.apikey+parseInt(new Date().getTime()/1000 ))+uni.getStorageSync('userinfo').userId+uni.getStorageSync('userinfo').access_token)
					},
					'GET'
				).then(res => {
					uni.requestPayment({
						provider:payType==1?'alipay':'wxpay',
						orderInfo:res.data,
						success(e) {
							
						},
						fail(e) {
							this.$sToast('支付失败')
						}
					})
				});
			}
		}
	}
</script>

<style>
	.wrapper {
		background: rgba(242, 243, 245, 1);
		display: flex;
		flex-direction: column;
	}

	.num_box {
		height: 830rpx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: flex-end;
	}


	.cos_num {
		height: 105rpx;
		display: flex;
		flex-direction: row;
		width: 720rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	}

	.spe {
		border: none;
	}

	.num {
		height: 26rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.m_right {
		margin-right: 30rpx;
		transform: scale(0.8);
	}

	.cos_pay {
		height: 74rpx;
		font: 26rpx/74rpx "";
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		margin-left: 31rpx;
	}

	.v_or_ali {
		/* height:302rpx; */
		background: rgba(255, 255, 255, 1);
		flex: 1;
	}

	.total_box {
		display: flex;
		flex-direction: row;
		margin: 37rpx 30rpx 39rpx 31rpx;
	}

	.total {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-right: 30rpx;
	}
	.total_num{
		font-size:26rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		margin-top: 2rpx;
	}
	.wadh{
		width:690rpx;
		height:80rpx;
		background:rgba(2,151,254,1);
		border-radius:8rpx;
		font-size:30rpx;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.wpay{
		margin-bottom: 20rpx;
	}
</style>
